<template>
	<view class="categorylist sysBg">
		<view class="themeConent">
			<ThemeComponet :themeList="themeList" to="preview"></ThemeComponet>
		</view>
	</view>
	<view class="safe-area-inset-bottom"></view>
</template>

<script setup>
    import { getCategoryList } from '@/api/theme/themeApi';
	const themeList = ref([]);
	let queryParms = ref(null);
	
	const getCategoryListByCategoryType = (data)=>{
		return getCategoryList(data)
	}
	onLoad(async(params)=>{
		console.log('接受到的参数',params);
		queryParms.value = params;
		const res = await getCategoryListByCategoryType(params);
		themeList.value = res.themeList;
		console.log('res====',res);
	});
	
	onReachBottom(async()=>{
		console.log('触底了')
		const res = await getCategoryListByCategoryType(queryParms.value);
		themeList.value.push(...res.themeList);
	})
	
	// onReachBottom, //uniapp的触底钩子函数
	// onPageScroll  // 监听页面滚动钩子函数
	
</script>

<style lang="scss" scoped>
.categorylist {
	 padding: 20rpx 30rpx 50rpx;
	.content {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap:5rpx;
		.item {
			width: 100%;
			height:440rpx;
			padding:5rpx;
			border-radius: 5rpx;
			image{
				display: block;
				width:100%;
				height:100%;
			}
		}
	}
}
</style>
